<!--
 * @Author: wellington wellington@kreditme.id
 * @Date: 2023-07-07 19:14:02
 * @LastEditors: wellington wellington@kreditme.id
 * @LastEditTime: 2023-07-10 17:29:22
 * @FilePath: /background-removal/src/components/XScroll.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div v-size-ob:borderBoxSize="handleResizeChange" class="scroll-container">
        <div class="v-scroll">
            <div class="content">
                <slot></slot>
            </div>
           
        </div>
    </div>
</template>

<script setup lang="ts">

const s = reactive({
    w: 0,
    h: 0
})
const handleResizeChange = (size: any) => {
    s.w = size.width
    s.h = size.height
}
</script>

<style  scoped>
.scroll-container {
    width: 100%;
    height: 100%
}   
/* v-scroll 的高度要等于父元素的宽度，宽度要等于父元素的高度，给后面旋转用 */
.v-scroll {
    width: calc(v-bind('s.h') * 1px);
    height: calc(v-bind('s.w') * 1px);
    position: relative;
    overflow: auto;
    transform-origin: 0 0;
   transform: translateY(calc(v-bind('s.h') * 1px)) rotate(-90deg)
}
.v-scroll::-webkit-scrollbar {
    /* display: none; */
    width: 0
}

/* 1. content 定位到v-scroll 的挨着的右侧，然后旋转90deg和v-scroll重合
2. 再次旋转v-scroll成横向的 */
.content {
   height: calc(v-bind('s.h') * 1px);
   position: absolute; 
   left: 100%;
   transform-origin: 0 0;
   transform: rotate(90deg)
}
</style>